<template>
  <view>
    <view class="position-fixed left-0 right-0 top-0" :style="{'z-index': 100}">
			<supplier-navbar :title="detail.store_name"></supplier-navbar>
			<supplier-sec-item2 :detail="detail" @collect="collect"></supplier-sec-item2>
			<view class="flex align-center bg-white">
				<view class="flex-1" >
					<dy-tabs :list="tabs" @click="tabSecendClick" :right="false"></dy-tabs>
				</view>
				<view class="u-p-x-30">
					<u-icon :name="!isGrid?'grid-fill': 'list'" size="40" @click="isGrid = !isGrid"></u-icon>
				</view>
			</view>
    </view>
		<mescroll-body ref="mescrollRef" top="146px" topbar :bottombar="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="">
			  <view class="flex flex-wrap justify-between u-m-20">
			    <block v-for="(item,index) in merchList" :key="item.id">
						<dy-goods-item-list :item="item" :isGrid="isGrid"></dy-goods-item-list>
			    </block>
			  </view>
			</view>
		</mescroll-body>
		<supplier-tabbar :supplierId="formData.merch_id" :index="1"></supplier-tabbar>
  </view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import { SupplierCenterApi } from '@/api/serves.js'
  import { GoodsCenterApi } from '@/api/serves.js'
  export default {
		mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
				detail: {},
				tabs: [
					{
				    name: '综合',
				    sort: false,
				    goods: null,
				  },
				  {
				    name: '销量',
				    sort: false,
				    goods: null,
				  },
				  {
				    name: '价格',
				    sort: true,
				    goods: null,
				  }
				],
				current: 0,
				index: 1,
        merchList: [],
        formData: {
          id: -1,
          name: "",
        	merch_id: '',
					types:'normal',
        },
				isGrid: true
      }
    },
		computed:{
			top() {
			  // #ifdef H5
			  return '44px'
			  // #endif
			  // #ifdef APP-VUE
			  return 0
			  // #endif
			},
		},
    onLoad(options) {
			console.log('options', options);
    	this.formData.merch_id = options.id
			this._initData()
    },
		methods: {
			_initData() {
				this._merchDetail()
			},
			_merchDetail() {
				SupplierCenterApi.merchDetail({id: this.formData.merch_id}).then(res => {
				  console.log('获取商户详情', res);
				  if (res.code == 1) {
						this.detail = res.data.data
				  }
				})
			},
			// 上拉加载
			upCallback(page) {
				let params = {
					...this.formData, 
					type: this.current?1:2,
					page: page.num,
				}
				console.log(params);
			  SupplierCenterApi.merchgoods_list2(params).then(res => {
			    console.log('获取商户商品列表', res);
			    if (res.code == 1) {
			  		let result = res.data
			  		if(page.num == 1) this.merchList = []; //如果是第一页需手动制空列表
			  		this.merchList = this.merchList.concat(result.listdata); //追加新数据
			  		this.mescroll.endByPage(result.listdata.length, result.pagedata.total)
			    }
			  })
			},
			custom(key) {
				this.formData.name = key
				this.mescroll.resetUpScroll()
			},
			tabSecendClick(index) {
				this.current = index;
				let obj = {
				  0: 'normal',
				  1: 'sales',
				  2: (!this.formData.types)?'price':(this.formData.types == 'price')?'max_price':'price'
				}
				this.formData.types = obj[index]
				console.log('搜索条件', this.formData);
				this.mescroll.resetUpScroll()
			},
      // 收藏 或取消收藏 商品
      collect() {
      	this.$ShowLoading()
      	let flg = this.detail.is_focus
      	let fun = flg? 'notcollectGoods': 'collectGoods'
      	GoodsCenterApi[fun]({ id: this.formData.merch_id, type:2 }).then(res => {
      	  console.log('收藏商品', res);
      	  if (res.code == 1) {
      	    this._merchDetail()
      			this.$HideLoading()
      			flg? this.$u.toast('取消收藏成功') : this.$u.toast('收藏成功')
      	  }else {
      			this.$Toast(res.msg, 1500)
      		}
      	})
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
